<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>电力巡查系统登录</title>
		<link rel="stylesheet" href="css/style.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app" class="container">
			<form class="form" onSubmit="return false" autocomplete="off">
				<div class="form-inner">
					<h2>电 力 巡 检 系 统 登 录</h2>
					<div class="input-wrapper">
						<label for="login-username">用户名</label>
						<div class="input-group"><span class="icon">
								<svg viewBox="0 0 24 24">
									<path>
									</path>
								</svg></span>
							<input type="text" v-model="username" data-lpignore="true">
						</div>
					</div>
					<div class="input-wrapper">
						<label for="login-password">密码</label>
						<div class="input-group"><span class="icon">
								<svg viewBox="0 0 24 24">
									
								</svg></span>
							<input type="password" v-model="password" data-lpignore="true">
						</div>
					</div>
					<div class="btn-group">
						<button class="btn btn--primary" @click.prevent="login()">登录</button><a class="btn--text" href="#0">忘记密码？</a>
					</div>
				</div>
			</form>
		</div>

		<script>
			new Vue({
			    el: "#app",
			    data() {
			        return {
			            username: '',
			            password: ''
			        };
			    },
			    methods: {
			      login() {
			          axios.get("http://127.0.0.1:8080/jwtLogin", {
			              params: {
			                  userName: this.username,
			                  userPassword: this.password
			              }
			          }).then((response) => {
			            console.log(response.data);
			            window.location.href = '首页.html';
			          }).catch(error => {
			              console.error(error);
			          });
			      }

			    }
			});
		</script>
	</body>
</html>